<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<style>
/*start 置顶*/
	.scroll{display:none;width:44px;height:44px;position:absolute;right:50px;bottom:105px;position:fixed;z-index:2;}
	.wx_com{width:44px;height:44px;position:absolute;right:50px;bottom:158px;position:fixed;z-index:10;}
	.scroll,.wx_com a{margin: 2px 0;}
	.scroll .s_btn,.comment,.wx,.phone{width:44px;height:44px;display:block;background-image:url('/WX-PLATFORM/resources/images/webwxgetmsgimg.jpg');}
	.phone,.wx,.comment,.s_btn{transition:0.5s;}
	.wx_com .phone{background-position:-5px -554px;}
	.wx_com .phone:hover{background-position:-5px -615px;}
	.wx_com .wx{background-position: -5px -864px;}
	.wx_com .wx:hover{background-position: -5px -926px;}
	.wx_com .comment{background-position: -5px -430px;}
	.wx_com .comment:hover{background-position: -5px -493px;}
	.scroll .s_btn{background-position: -5px -677px;}
	.scroll .s_btn:hover{background-position: -5px -741px;}
	/*end 置顶*/
	
	/*start 右侧边栏*/
	.wx .elevator-weixin,.phone .elevator-phone{background-image:url('/WX-PLATFORM/resources/images/webwxgetmsgimg.jpg');}
	.elevator-weixin{position:absolute;right:44px;top:36px;transition:all 0.5s ease;background-position:0px 4px;}
	.wx:hover .elevator-weixin{transition:all 0.5s ease;display:block;width:172px;height:212px;top:-160px;}
	.elevator-phone{position:absolute;right:44px;top:128px;transition:all 0.5s ease;background-position:0px -210px;}
	.phone:hover .elevator-phone{display:block;width:172px;height:212px;top:-59px;transition:all 0.5s ease;};
	/*end 右侧边栏*/
	


</style>
 <!--start 右侧边栏-->
 <div class="wx_com">
	<!-- <a href="#" class="wx">
		<div class="elevator-weixin"></div>
	</a> -->
	<a href="/WX-PLATFORM/user/list.htm#message" class="comment"></a>
	<!-- <a href="#" class="phone">
		<div class="elevator-phone"></div>
	</a> -->
</div>
<!--end 右侧边栏-->
<div id="app-top">
	<input v-model="login_token" type="hidden" value="${oatoken_}"/>
	<div class="outer-b" style="min-width:1400px;">
	<div class="g-logo">
		<a href="<c:url value='/user/list.htm'/>"/><img width="50" height="50" src="/WX-PLATFORM/resources/images/logo5.jpg"/></a>
		<p class="websitename">1991S.CN</p>
	</div>
	<div class="b-h-box">
		<div class="header">
		<%-- <div class="logo">
			<div class="user-info-m">
				<div style="float: right;top: -16px;position: relative;">
					<img class="man-img" src="<c:url value='/resources/images/sanpang.png'/>">
					<div class="user-i" style="font-size: 16px;">
						你好!<span class="uname">${curr_user.usernick}</span>
						<span class="exit"><a style="color: red;font-size: 16px;" href="javascript:;"><em class="iconfont icon-tuichu"></em>退出</a></span>
					</div>
				</div>
			</div>
		</div> --%>
		<style>
			.qq-icon,.wxgzh-icon{vertical-align: middle;height: 20px;width: 20px;}
			.gzh-desc{background:green;color:#fff;padding:2px 4px;font-size:12px;border-radius:2px;}
		</style>
			<div style="float:left;">
				<p class="qq-ico-qun" style="font-size: 16px;">
					<svg class="icon qq-icon" aria-hidden="true">
					  <use xlink:href="#icon-qq"></use>
					</svg>：JAVA微信开发Q群1(<i class="qun-status" style="color:red;">已满</i>)
					<span class="gongzhonghao" style="cursor: pointer;margin-left:10px;">
						<!-- <svg class="icon wxgzh-icon" aria-hidden="true">
						    <use xlink:href="#icon-gongzhonghao"></use>
						</svg> -->
						<span class="gzh-desc">关注公众号</span>
					</span>
				</p>
				<p style="font-size: 16px; margin-right: 33px;">
					<svg class="icon qq-icon" aria-hidden="true">
					  <use xlink:href="#icon-qq"></use>
					</svg>：JAVA微信开发Q群2:<i style="color:orange;padding:5px;">315907480</i> (<i class="qun-status" style="color:green;">新群</i>)</p>
			</div>
		</div>
		<style>
				.b-h-box{height:70px;width: 1200px;margin: 0 auto;position:relative;}
				.wx-nav li .a-comm{float:left;padding: 20px;font-size:16px;border-bottom: 6px solid #63C30A;margin-right: 5px;transition:all .3s;}
				.wx-nav li .a-comm:hover{background:orange;color:#fff;}
				.login-box{position: absolute;right: 0;top: 0;cursor: pointer;}
				.login-box a{padding: 9px 14px;}
				.logcomm{color: #fff;border-radius: 2px;}
				.logon{background: orange;}
				.signup{background: #60D295;}
				.mypic{margin-right:8px;}
				.usernick{font-size:16px;}
				
				.tools{position:relative;display: inline-block;}
				.t-box{box-shadow: rgb(204, 199, 199) 0px 0px 5px;position:absolute;top:70px;right:0;background:green;padding:10px 10px;font-size:13px;color:#333;background-color:#fff;width:152px;}
				.t-box ul li{padding: 6px 6px;border-bottom: 1px solid #efefef;}
				.t-box ul li:last-child{border-bottom:none;}
				.t-box ul li a{height: 100%;display: inline-block;}
				.t-box ul li a:hover{color:orange;}
				.icon-down{display: inline-block;width:0;height:0;border-style:solid;margin:40px auto;position:relative;right:20px;top:-12px;}
			</style>
			<ul class="wx-nav">
				<li><a class="a-comm index" href="<c:url value='/user/list.htm'/>">首页</a></li>
				<li><a class="a-comm" href="<c:url value='/user/xcx_nav.htm'/>">小程序导航</a></li>
				<li><a class="a-comm article" href="<c:url value='/article_list.htm'/>">文章<i class="dot"></i></a></li>
				<li><a class="a-comm tanchuang" href="javascript:;">联系站长</a></li>
				<li class="li-tool">
					<div class="tools">
						<a class="a-comm tool">实用工具</a>
						<i class="icon-down" style="border-width:6px 6px 0;border-color:#333 transparent transparent;"></i>
						<div class="t-box" style="display:none;">
							<ul>
								<li><a  style="font-size:12px;" class="a-tool" target="_blank" href="<c:url value='/resources/static/css-format.html'/>">css样式格式化工具</a></li>
								<li><a style="font-size:12px;" class="a-tool" target="_blank" href="<c:url value='/resources/static/yinhao.html'/>">HTML单双引号转换</a></li>
							</ul>
						</div>
					</div>
					<script type="text/javascript">
						  $(".tools").mouseover(function(){
							 $(".t-box").css({"display":"block","border-width":"0 6px 6px","border-color":"transparent transparent #333"});
							 $(".icon-down").css({"border-width":"0 6px 6px","border-color":"transparent transparent #333"});
						  });
						  $(".tools").mouseout(function(){
							  $(".t-box").css({"display":"none"});
							  $(".icon-down").css({"border-width":"6px 6px 0","border-color":"#333 transparent transparent"});
						  });
					</script>
				</li>
			</ul>
			<p class="login-box" v-on:click="showUserMsgBox" style="display:inline-block;float:right;line-height: 70px;">
				<c:choose>
				   <c:when test="${curr_user==null}">  
				        <a class="logon logcomm" href="###" @click="login">登录</a>
						<a class="signup logcomm" href="<c:url value='/user/signup.htm'/>">注册</a>  
				   </c:when>
				   <c:otherwise> 
				        <span class="mypic" href="<c:url value='/user/login.htm'/>">
							<img alt="" v-if="userPic.exist" :src="userPic.exist" width="50" height="50" style="border-radius:50%;"/>
							<img alt="" v-else  width="50" height="50" style="border-radius:50%;" :src="userPic.empty"/>
						</span>
						<input v-model="uid" type="hidden" value="${curr_user.userid}"/>
						<span class="usernick">
							{{user.usernick}}
							<i class="dot" style="right: -2px;top: 18px;"></i>
						</span>
						
				   </c:otherwise>
				</c:choose>
				<style>
					.user-msgs{position: absolute;right: 0;top: 72px;width: 15%;background: #fff;box-shadow: 0px 2px 9px #BBBDB9;}
					.user-msgs ul li{padding: 6px 0;margin:0 5px;border-bottom: 1px solid #eee;}
					.user-msgs ul li a:hover{color:red;}
					.user-msgs ul li a{position:relative;color:#333;display:inline-block;width:100%;font-size:13px;font-family: 微软雅黑!important;}
					.user-msgs ul li a.last-i{border-bottom:none;}
					.user-msgs svg{width:26px;height:40px;}
				</style>
				<c:choose>
					<c:when test="${curr_user!=null}">  
					        <div class="user-msgs" style="display:none;">
								<ul>
									<li>
										<a href="/WX-PLATFORM/user/list.htm#message">
											<svg class="icon chuizhicenter" aria-hidden="true">
											  <use xlink:href="#icon-youxian"></use>
											</svg>
											<span>站长回复</span>
											<i class="dot" style=" right:45%;top:8px;"></i>
										</a>
									</li>
									<li>
										<a href="#">
											<svg class="icon chuizhicenter" aria-hidden="true">
											  <use xlink:href="#icon-guangbo"></use>
											</svg>
											<span>我的订单</span>
											<i class="dot" style=" right:45%;top:8px;"></i>
										</a>
									</li>
									<li>
										<a href="#">
											<svg class="icon chuizhicenter" aria-hidden="true">
											  <use xlink:href="#icon-sikao"></use>
											</svg>
											<span>我的收藏</span>
										</a>
									</li>
									<li>
										<a href="javascript:;" class="exit">
											<svg class="icon chuizhicenter" aria-hidden="true">
											  <use xlink:href="#icon-signout"></use>
											</svg>
											<span>安全退出</span>
										</a>
									</li>
								</ul>
							</div>  
					   </c:when>
				</c:choose>
				
			</p>
	</div>
	<div style="clear:both;"></div>
	</div>
</div>
<script>
$(function(){
	console.log("========================="+v.login_token);
	v.loadUser();
	$(".user-msgs ul li").on("click",function(){
		$(".user-msgs").hide(); 
	});
	$("body").bind("click",function(evt){ 
		if($(evt.target).parents(".b-h-box").length==0){ 
			$(".user-msgs").hide(); 
		} 
	}); 
});
	var v=new Vue({
		el:"#app-top",
		data:{
			login_token:"",//判断是否登陆
			uid:'',
			userPic:{
				exist:"",
				empty:"http://img.mukewang.com/57035ff200014b8a06000338-228-128.jpg"
			},
			user:{}
		},
		methods:{
			login:function(){
				console.log("login_toekn2:"+v.login_token);
				if(v.login_token=='' || v.login_token == undefined){
					$.gnwindows.gnLoginWindow();return;
				}
			},
			loadUser:function(){
				$.ajax({
					url:"<c:url value='/rest/user.find'/>?uid=${curr_user.userid}",
					type:"GET",
					dataType:"json",
					success:function(r){
						console.log(r);
						v.user=r;
					},
					error:function(e){
					}
				});
			},
			showUserMsgBox:function(evt){
				$(".user-msgs").css({"display":"block"});
			},
			contactMe:function(){
				console.log("=======");
				//捕获页
				layer.open({
				  type: 1,
				  shade: false,
				  title: true, //不显示标题
				  content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
				  cancel: function(){
				    layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
				  }
				});
			}
		},
		//vue渲染经过转义的html字符串
		filters: {
			unescape:function (html) {
			    return html
			      .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
			      .replace(/&lt;/g, "<")
			      .replace(/&gt;/g, ">")
			      .replace(/&quot;/g, "\"")
			      .replace(/&#39;/g, "\'");
			  }
		},
		created: function(){
			$.ajax({
				url:"<c:url value='/rest/user.find'/>?uid=${curr_user.userid}",
				type:"GET",
				dataType:"json",
				success:function(rep){
					if(rep.userPic!=''){console.log("pic2="+rep.userPic);v.userPic.exist=rep.userPic;}
				},
				error:function(e){
				}
			});
		}
	});
</script>